import { Component, Injectable, OnInit } from '@angular/core';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable()
export class Demo10Service {
  constructor() {}

  getUsers(data: { [key: string]: any }) {
    const users = Array.from({ length: data.pageSize }).map((item, key) => {
      return this.initUser(data.pageIndex * data.pageSize + key);
    });
    return of(users).pipe(delay(300));
  }

  initUser(key: number) {
    return { name: `user${key}`, age: 10 + key, expand: false, random: parseInt(Math.random() * 100 + '') };
  }
}

@Component({
  selector: 'app-demo10',
  templateUrl: './demo10.component.html',
  providers: [Demo10Service],
})
export class Demo10Component implements OnInit {
  data;
  pageSize = 10;
  pageIndex = 0;
  total = 100;
  sizeOptions = [10, 20, 30];
  constructor(private service: Demo10Service) {}

  ngOnInit() {
    this.initData();
  }

  initData() {
    this.pageChange({ pageIndex: this.pageIndex, pageSize: this.pageSize });
  }

  pageChange(data) {
    this.service.getUsers(data).subscribe(res => (this.data = res));
  }
}
